<template>
	<view class="container">
		<view class="money-con">
			<mescroll-body
			ref="mescrollRef" @up="getAllDetail" @init="mescrollInit" :up="upOption"
			:down="downOption" :fixed="true" @down="downCallback">
				<view v-for="(item,index) in list" :key="index" class="record-item">
						<view class="record-left">
							<i class="iconfont"
							:class="item.sort=='0'?'iconzhichu zhichu-color':'iconshouru shouru-color'"></i>
						</view>
						<view class="record-center">
							<view class="record-order">订单编号：{{item.sort=='0'?item.userWithdrawId:item.orderId}}
							</view>
							<template v-if="item.sort=='1'">
								<view class="record-order">订单金额：{{item.realAmount}}</view>
								<view class="record-order">微信昵称：{{item.nickName}}</view>
							</template>
							<view class="record-date">
								<template v-if="item.sort=='0'">{{item.withdrawDate}}</template>
								<template v-else>订单日期：{{item.createTime}}</template>
							</view>
						</view>
						<view class="record-right">
							<view class="record-status">
								<text>结算状态：</text>
								<template v-if="item.rebateFlag=='1'">已结算</template>
								<template v-else>未结算</template>
							
								<template v-if="item.rebateFlag=='0'&&item.customerServiceStatusFlag=='1'">
									<view>售后申请中</view>
								</template>
							</view>
							<view class="record-amount">+提成：￥{{item.agencyFee}}</view>
						</view>
				</view>
			</mescroll-body>
		</view>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import tuiButton from "@/components/button/button"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [ MescrollMixin],
		components: {
			tuiButton,
			
		},
		data() {
			return {
				scrollTop: 0,
				showflg:false,
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, 
				},
				downOption:{
					auto: false,
				},
				type:'',//'2'为顾客，'3'为会员
				agencyFeeType:'',//'1'为顾客，'2'为会员
				list:[],
				
			};
		},
		onLoad(options){
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			this.customerUserId=options.customerUserId;
			if(options.type==='customers'){
				this.type='2'
				this.agencyFeeType='1'
			}else if(options.type==='members'){
				this.type='3'
				this.agencyFeeType='2'
			}
			
		},
		methods: {
			getAllDetail(page){
				const params = {
					type:this.type,
					current: page.num,
					pageSize: page.size,
					customerUserId:this.customerUserId,
					agencyFeeType:this.agencyFeeType
				};
				this.$http.allCommission(params).then((res) => {
					if(res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.list= []
						};
						this.list = this.list.concat(curPageData);
					}
				})
			},
		},
		onPageScroll(e) {
			// console.log(e.scrollTop)
			this.scrollTop = e.scrollTop
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
	}
	.money-con{
		width: 100%;
		.record-item{
			padding:14rpx 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			margin-top:16rpx;
			background-color: #fff;
			min-height: 140rpx;
			position: relative;
			.record-left{
				width:56rpx;
				height:56rpx;
				line-height:56rpx;
				text-align: center;
				border:2rpx solid $borderColor;
				border-radius: 50%;
				margin-right: 8rpx;
				i{
					font-size: 40rpx;
				}
				i.zhichu-color{
					color:$red;
				}
				i.shouru-color{
					color:#4db2a4;
				}
			}
			.record-center{
				flex:1;
				line-height: 44rpx;
				font-size: 24rpx;
				.record-order{
					color:#121212;
				}
				.record-date{
					color:#aaa;
				}
				
			}
			.record-right{
				font-size: 26rpx;
				
				
				.record-status{
					width:240rpx;
					text-align: right;
					position: absolute;
					right: 20rpx;
					top:16rpx;
					color: $red;
				}
				.record-amount{
					position: absolute;
					right: 20rpx;
					bottom:16rpx;
					text-align: right;
				}
			}
			
		}
	}
</style>
